<template>
  <div>
    <div>
      <el-container>
        <el-header>
          <div style="text-align: right">
            <router-link to="/">登录</router-link>
            <el-divider direction="vertical"/>
            <router-link to="/register">注册</router-link>
          </div>
          <h2 style="text-align: center">Lovo商城供应商系统</h2>
        </el-header>
        <el-main>
          <div style="display: flex;justify-content: center;margin-top: 30px;">
            <el-form
                label-position="left"
                ref="registerForm"
                :model="formData"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                size="default"
                style="width: 800px"
                status-icon
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名" prop="userName">
                    <el-input v-model="formData.userName"/>
                  </el-form-item>
                  <el-form-item label="供应商名称" prop="supplierName">
                    <el-input v-model="formData.supplierName"/>
                  </el-form-item>
                  <el-form-item label="公司地址" prop="address">
                    <el-input v-model="formData.address"/>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="formData.password"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司邮箱" prop="email">
                    <el-input v-model="formData.email"/>
                  </el-form-item>
                  <el-form-item label="负责人姓名" prop="principalName">
                    <el-input v-model="formData.principalName"/>
                  </el-form-item>

                  <el-form-item label="公司电话" prop="phone">
                    <el-input v-model="formData.phone"/>
                  </el-form-item>

                  <el-form-item label="确认密码" prop="pwdAgain">
                    <el-input type="password" v-model="formData.pwdAgain"/>
                  </el-form-item>

                </el-col>

              </el-row>

              <el-form-item label="经营范围" prop="scope">
                <el-input v-model="formData.scope" type="textarea"/>
              </el-form-item>
              <el-alert
                  title="温馨提示：点击即可上传图片，只允许上传.jpg或.png或.jpeg格式，图片大小不能超过500kb"
                  type="warning"
                  :closable="false">
              </el-alert>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证图片" prop="identity">
                    <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
                    <el-upload
                        class="avatar-uploader"
                        action="#"
                        :on-change="handleChange1"
                        :auto-upload="false"
                        :show-file-list="false"
                        accept=".jpg,.png,.jpeg"><!--覆盖默认上传-->
                      <img v-if="formData.identity" :src="formData.identity" class="avatar">
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus/>
                      </el-icon>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资质图片" prop="image">
                    <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
                    <el-upload
                        class="avatar-uploader"
                        action="#"
                        :on-change="handleChange"
                        :auto-upload="false"
                        accept=".jpg,.png,.jpeg"
                        :show-file-list="false">
                      <img v-if="formData.image" :src="formData.image" class="avatar">
                      <el-icon v-else class="avatar-uploader-icon">
                        <Plus/>
                      </el-icon>
                      <template #tip>
                        <div class="el-upload__tip">
                          jpg/png/jpeg files with a size less than 500kb
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div class="buttonDiv">
                  <el-button type="primary" @click="register('registerForm')">
                    注册
                  </el-button>
                  <el-button @click="resetForm('registerForm')">
                    重置
                  </el-button>
                </div>
              </el-form-item>
            </el-form>

          </div>

        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
// import  UploadFile from 'element-plus'
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  data() {
    return {
      formData: {},
      rules: {
        userName: [
          {
            required: true,
            pattern: '^[0-9a-zA-Z_]{3,20}$',
            message: '用户名长度3-20位，由数字，字母，下划线组成', trigger: 'blur'
          },
        ],
        password: [
          {
            required: true,
            pattern: '^[0-9a-zA-Z_]{3,20}$',
            message: '密码长度3-20位，由数字，字母，下划线组成', trigger: 'blur'
          },
        ],
        supplierName: [
          {
            required: true,
            message: '请正确输入供应商名称', trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            type: 'email',
            message: '请正确输入邮箱',
            trigger: ['blur'],
          },
        ],
        address: [
          {
            required: true,
            message: '请正确输入地址', trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3-9][0-9]{9}$/,
            message: '手机号需为1[3-9]开始的11位数字', trigger: 'blur'
          },
        ],
        principalName: [
          {
            required: true,
            message: '请正确输入负责人姓名', trigger: 'blur'
          }
        ],
        scope: [
          {
            required: true,
            message: '请填写经营范围', trigger: 'blur'
          }
        ],
        pwdAgain: [
          {
            required: true,
            message: '请再次确认密码', trigger: 'blur'
          }
        ],
        image: [
          {
            required: true,
            message: '必须上传资质图片', trigger: 'blur'
          }
        ],
        identity: [
          {
            required: true,
            message: '必须上传身份证图片', trigger: 'blur'
          }
        ],

      },
      /*    imageUrl: null,
          tempUrl: '',
          identityUrl: '',
          tempUrl1: null,
          image: '',
          identity: ''*/
    }
  },
  methods: {
    register(formName) {
      if (this.formData.password !== this.formData.pwdAgain) {
        ElMessage.error("两次密码不一致")
        return
      }
      /*
            let paramData=new FormData;
            paramData.append("userName",this.formData.userName)
            paramData.append("password",this.formData.password)
            paramData.append("image",this.formData.image)
            paramData.append("identity",this.formData.identity)
            paramData.append("supplierName",this.formData.supplierName)
            paramData.append("email",this.formData.email)
            paramData.append("address",this.formData.address)
            paramData.append("phone",this.formData.phone)
            paramData.append("principalName",this.formData.principalName)
            paramData.append("scope",this.formData.scope)*/
      this.$refs[formName].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          axios.post("/project/supplier/register", this.formData).then(resp => {
            if (resp.data.success === true) {
              this.$router.push("/")
            } else {
              ElMessage.error(resp.data.errorMsg)
            }
          })
        }
        /* else {   //校验不通过
           alert('不能提交');
         }*/
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //将上传图片的原路径赋值给临时路径
    handleChange(file) {

      if (file.size > 500 * 1000) {
        ElMessage.error("图片大小不能超过500kb")
        return
      }
      var imgFile = new FileReader();
      imgFile.readAsDataURL(file.raw);
      let that = this;
      imgFile.onload = function () {
        var imgData = this.result; //base64数据
        that.formData.image = imgData
      }

    },//将上传图片的原路径赋值给临时路径
    handleChange1(file) {
      if (file.size > 500 * 1000) {
        ElMessage.error("图片大小不能超过500kb")
        return
      }
      var imgFile = new FileReader();
      imgFile.readAsDataURL(file.raw);
      let that = this;
      imgFile.onload = function () {
        var imgData = this.result; //base64数据
        that.formData.identity = imgData
      }
    },
    init() {
      axios.get("/project/supplier/findById").then(resp => {
        this.formData = resp.data.data;
      })
    }
  },
  created() {
    let status = this.$route.query.status
    if (status) {
      this.init()
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-left: 20px;
}

.buttonDiv {
  margin: auto;
}

.el-button {
  margin: 30px;
}

.avatar-uploader {
  margin-top: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: flex;
}
</style>